<template>
  <div class="admin-nav">
    <!-- <div class="nav-left"> -->
    <el-breadcrumb separator-class="el-icon-arrow-right nav-left" v-show="navList.length">
      <el-breadcrumb-item v-for="(item,index) in navList" :key="item.path+index" :to="item.path||'/'">
        <!-- {{item.path}} -->
        <span v-text="item.meta"></span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- </div> -->
    <div class="nav-right">
      <el-dropdown :hide-on-click="true">
        <span class="el-dropdown-link">
          <span v-text="`${roleTypeName[adminInfo.roleType]}，${adminInfo.account}`"></span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
          <el-dropdown-item>取消</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>

</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
	data() {
		return {
			roleTypeName: {
				1: '超级管理员',
				2: '管理员',
				3: '测试',
				4: '运营',
			},
		};
	},
	computed: {
		...mapGetters('admin', ['navTitleList', 'adminInfo']),
		navList() {
			return this.$route.matched;
		},
	},
	mounted() {
		setTimeout(() => {}, 2000);
		console.log(this.adminInfo, 'adminInfo-----xxx-----');
	},
	methods: {
		loginOut() {
			console.log('----------->');
			this.$http('/admin/loginOut').then(res => {});
		},
	},
};
</script>
style.<style lang="scss">
.admin-nav {
	padding: 15px;
	display: flex;
	justify-content: space-between;
  align-items: center;
	> .nav-right {
		flex: 0 1 auto;
	}
	> .nav-left {
	}
}
</style>

